<template>
<div :style="{width:width,height:height}">
    <div v-show="flag"  class="" ref="echarts" :style="{height:height}"></div>
    <div v-show="!flag"  class="no-data-echarts">
        {{message}}
    </div>
</div>
</template>
<script>
import mixincomon from '../../mixins/mixincomon';

export default {
    name:"chart",
    mixins: [mixincomon],
    data(){
        return {
            flag:true,
            options: {
                series: [{
                  min:0,
                  max:100,
                  type: 'gauge',
                  progress: {
                    show: true,
                    width: 10
                  },
                  axisLine:{
                    lineStyle:{
                      width:12,
                      color:[[0.6,"#4ad5da"],[0.8,"#00b1ee"],[1,"#0693f7"]]
                    }
                  },
                  axisTick: {
                    show: false
                  },
                  splitLine: {
                    show:false,
                    length:10,
                    lineStyle: {
                      width: 2,
                      color: '#999'
                    }
                  },
                  axisLabel: {
                    show:false,
                    distance: 25,
                    color: '#999',
                    fontSize: 20
                  },
                  anchor: {
                    show: true,
                    showAbove: true,
                    size: 25,
                    itemStyle: {
                      borderWidth: 10
                    }
                  },
                  title: {
                    show: false
                  },
                  detail: {
                    valueAnimation: true,
                    fontSize: 40,
                    offsetCenter: [0, '70%']
                  },
                  data: [{
                    value: 70
                  }]
                }]
            },

        }
    },
    props:{
        option:{
            type:Object,
            default:()=>{
                return {}
            }
        },
        data:{
            type:Array,
            default:()=>{
                return []
            }
        },
    },
    mounted(){
        this.$nextTick(()=>{
            this.init();
        })
    },
    methods:{
        init(){
            if(this.data.length>0){
                let _option=this.tool.deepMerge(this.options,this.option);
                this.flag=true;
                this.$nextTick(()=>{
                    _option.series[0].data=this.data;
                    // console.log(JSON.stringify(_option),'_option111======')
                    this.initChart('echarts',_option);
                 })

            }else{
                this.clearChart();
                this.flag=false;
            }
        }
    }
}
</script>
<style lang="less" scoped>
.no-data-echarts{
    height: 100%;
    position: relative;
    span{
        left: 0;
        text-align: center;
        position: absolute;
        top: 45%;
    }
}
</style>
